<template>
	<view class="bj">

		<view class="header">
			<view class="backcenter" @tap="goMine">
				个人中心2
			</view>
			<view class="h">
				<text class="tx">账户总资产(元)</text>
				<text class="nu">\n{{totalM}}</text>
			</view>
		</view>
		<view class="imgtatal">
			<view class="tu">
				<view class="box1">
					<view class="content">
						<view class="charts-box">
							<qiun-data-charts type="ring" :opts="{ legend: { position: 'right' } }"
								:chartData="circleList" :echartsH5="true" :echartsApp="true" />
						</view>
					</view>
				</view>
				<view class="box2">
					<view class='bigbox'>
						<view class='smallbox'>余额</view>
						<text>{{userInfo.restAmountAll||0}}</text>
					</view>
					<view class='bigbox'>
						<view class='smallbox'>基金</view>
						<text>{{fund.totalAssets||0}}</text>
					</view>
					<view class='bigbox'>
						<view class='smallbox'>黄金</view>
						<text>{{gold.totalAssets||0}}</text>
					</view>
					<view class='bigbox'>
						<view class='smallbox'>定期</view>
						<text>{{fixed.totalAssets||0}}</text>
					</view>
					<view class='bigbox'>
						<view class='smallbox'>活期</view>
						<text>{{current.totalAssets||0}}</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<button class="b" type="default" @tap="tuchonhgzhi">充值</button>
				<button class="b" type="default" @tap="tixian">提现</button>
			</view>
		</view>

		<view class="earnings">
			<text>收益详情</text>
			<view class="aside">
				<text>单日盈收</text>
				<text>月度盈亏</text>
				<text>季节盈亏</text>
			</view>
			<view class="content">
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="{
              extra: { area: { type: 'curve', addLine: true, gradient: true } },
            }" :chartData="chartsDataArea2" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('order')
	const {
		mapActions:usersmapActions,
		mapState:usersmapState,
		mapMutations:usersmapMutations
	} = createNamespacedHelpers("users")
	export default {
		data() {
			return {
				fund: {},
				gold: {},
				fixed: {},
				current: {},

				chartsDataArea2: {
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
					series: [{
							name: "成交量A",
							data: [35, 8, 25, 37, 4, 20],
						},
						{
							name: "成交量B",
							data: [70, 40, 65, 100, 44, 68],
						},
						{
							name: "成交量C",
							data: [100, 80, 95, 150, 112, 132],
						},
					],
				},
			};
		},
		computed: {
			...usersmapState(['userInfo']),
			//总资产
			totalM() {
				let datad = 0
				if (this.fund.totalAssets) {
					datad += this.fund.totalAssets
				}
				if (this.gold.totalAssets) {
					datad += this.gold.totalAssets
				}
				if (this.fixed.totalAssets) {
					datad += this.fixed.totalAssets
				}
				if (this.current.totalAssets) {
					datad += this.current.totalAssets
				}
				if(this.userInfo.restAmountAll){
					datad+=this.userInfo.restAmountAll
				}
				// datad = this.fund.totalAssets?this.fund.totalAssets:0 + this.gold.totalAssets?this.gold.totalAssets:0 + this.fixed.totalAssets?this.fixed.totalAssets:0 + this.current.totalAssets?this.current.totalAssets:0
				// return this.fund.totalAssets+this.gold.totalAssets+this.fixed.totalAssets+this.current.totalAssets
				return datad
			},
			circleList() {
				return {
					series: [{
						data: [{
								name: "基金",
								value: this.fund.totalAssets ? this.fund.totalAssets / this.totalM : 1,
							},
							{
								name: "黄金",
								value: this.gold.totalAssets ? this.gold.totalAssets / this.totalM : 1,
							},
							{
								name: "定期",
								value: this.fixed.totalAssets ? this.fixed.totalAssets / this.totalM : 1,
							},
							{
								name: "活期",
								value: this.current.totalAssets ? this.current.totalAssets / this.totalM: 1,
							}
						],
					}, ]
				}
			}
		},
		methods: {
			...mapActions(['holdType']),
			goMine() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			},
			tuchonhgzhi() {
				// <navigator url="/pagesD/recharge/recharge">
				if(this.userInfo.status){
					uni.navigateTo({
						url: "/pagesD/recharge/recharge"
					})
				}else{
					uni.showToast({
						title:'请先实名认证',
						duration:2000,
						icon:'none'
					})
				}

			},
			tixian() {
				uni.navigateTo({
					url: "/pagesD/withdrawDeposit/withdrawDeposit"
				})
			}
		},
		async onLoad() {
			// const fundData = await this.holdType('fund')
			// const goldData =await  this.holdType('gold')
			// const fixedData = await this.holdType('fixed')
			// const currentData =await  this.holdType('current')

			// console.log(fundData,goldData,fixedData,currentData)
			this.fund = await this.holdType('fund')
			this.gold = await this.holdType('gold')
			this.fixed = await this.holdType('fixed')
			this.current = await this.holdType('current')
			console.log(this.fund, this.gold, this.fixed, this.current)
		}
	};
</script>

<style scoped lang="scss">
	.bj {
		background: url(../static/zichanbeijintu.png);
		background-size: 130%;
		background-repeat: no-repeat;
		background-position: center -120rpx;
		overflow: hidden;

		.header {
			text-align: center;
			padding-top: 80rpx;
			position: relative;

			.backcenter {
				position: absolute;
				top: 20rpx;
				// width: 120rpx;
				padding: 0 10rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 25rpx;
				right: 50rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
			}

			.h {
				.tx {
					width: 224rpx;
					height: 44rpx;
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 44rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
				}

				.nu {
					width: 316rpx;
					height: 88rpx;
					font-family: DIN;
					font-size: 72rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 88rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
				}
			}
		}

		.imgtatal {
			width: 670rpx;
			height: 468rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 12rpx;
			margin: 30rpx auto;

			.tu {
				height: 362rpx;
				display: flex;
				padding: 20rpx;

				.box1 {
					// border: 1px solid red;
					width: 350rpx;
					position: relative;

					.content {
						margin-top: -20rpx;
					}
				}

				.box2 {
					// border: 1px solid red;
					width: 288rpx;
					text-align: left;
					// height: 288rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					padding: 50rpx 0rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #323232;

					.bigbox {
						display: flex;
						width: 100%;
						// justify-content: space-around;
						flex: 1;

						.smallbox {
							width: 100rpx;
							flex-shrink: 0;
						}
					}
				}
			}

			.btn {
				display: flex;

				.b {
					flex-grow: 1;
					background-color: #3e9de6;
					color: #ffffff;
					font-size: 32rpx;
					font-weight: bold;

					&:nth-of-type(1) {
						border-radius: 0rpx 0rpx 0rpx 12rpx;

					}

					&:nth-of-type(2) {
						border-radius: 0rpx 0rpx 12rpx 0rpx;

						&::after {
							display: block;
							content: "";
							height: 100rpx;
							width: 10rpx;
							background-color: #FFFFFF;
							margin-top: 12rpx;
						}
					}
				}

				.b::after {
					border: none;
					width: 64rpx;
					height: 44rpx;
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 44rpx;
					letter-spacing: 0rpx;
				}
			}
		}

		.earnings {
			// width: 160rpx;
			// height: 56rpx;
			font-family: PingFang SC;
			font-size: 40rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 56rpx;
			letter-spacing: 0rpx;
			color: #323232;
			padding: 40rpx;

			.aside {
				margin-top: 28rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: 0rpx;
				color: #323232;
				display: flex;
				justify-content: space-between;
			}

			.content {
				display: flex;
				flex-direction: column;
				flex: 1;

				.charts-box {
					width: 100%;
					height: 200px;
				}
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;

		.charts-box {
			width: 100%;
			height: 200px;
		}
	}

	// .content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	flex: 1;

	// 	.charts-box {
	// 		width: 100%;
	// 		height: 200px;
	// 	}
	// }
</style>
